<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<title>网络公司-宠物详情页</title>
<link rel="stylesheet" href="../res/layui/css/layui.css">
<link rel="stylesheet" href="../res/static/css/index.css">
</head>
<body>
	<!-- nav部分 -->
	<div id="head"></div>
	<!-- main部分 -->
	<div class="main-newsdate">
		<div class="layui-container">


			<div class="layui-row">
				<div class="layui-col-xs5">
					<div class="grid-demo grid-demo-bg1">
						<img src="" id="img" height="400px" >
					</div>
				</div>
				<div class="layui-col-xs1">
				<span>&nbsp;</span>
				</div>
				<div class="layui-col-xs6">
					<div class="grid-demo">
						<p class="introTop">
							名字：<span id="name"></span>
						</p>
						<p class="introTop">
							颜色：<span id="yanse"></span>
						</p>
						<p class="introTop">
							年龄：<span id="age"></span>
						</p>
						<p class="introTop">
							价格：<span id="jiage" style="color: red;"></span>
						</p>
						<span><button type="button" class="layui-btn layui-btn-primary" style=" margin-left: 20px;margin-bottom: 40px;background-color:#46B8DA;">加入购物车</button></span>
						<span><button type="button" class="layui-btn layui-btn-primary" style=" margin-left: 20px;margin-bottom: 40px;background-color:#46B8DA;">立即购买</button></span>
					</div>
				</div>
			</div>
				<p style="font-size:30px;">简介</p>
				<p id="jianjie" style="padding: 20px;"></p>


		</div>
	</div>
	<!-- footer部分 -->
	<div id="footer"></div>
	<script src="../res/layui/layui.js"></script>
	<script src="../js/jquery-1.8.2.js"></script>
	<script>
		$("#head").load("页眉.html");
		$("#footer").load("页脚.html");
	</script>

	<script>
		function getQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
			var url = decodeURI(decodeURI(window.location.search))
			var r = url.substr(1).match(reg);
			if (r != null)
				return unescape(r[2]);
			return null;
		}

		$(function() {
			$.ajax({
				url : '../Mhcx',
				type : "get",
				data : {
					id : getQueryString("id"),
				},
				success : function(res) {
					var data = res.data;
					if (res.code == 0) {

						$("#name").html(data[0].name);
						$("#yanse").html(data[0].yanse);
						$("#jiage").html(data[0].jiage);
						$("#age").html(data[0].age);
						$("#jianjie").html(data[0].jianjie);
					$("#img").attr("src","../img/"+data[0].photo)
					}

				}

			});

		});
	</script>
	<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
	<script>
		layui.config({
			base : '../res/static/js/'
		}).use('firm');
	</script>

</body>
</html>